<template>
  <template v-if="cMode === 'design'">
    <simulation-dialog   v-bind="props" @updateDialogAttribute="updateDialogAttribute"/>
  </template>
  <template v-else-if="cMode === 'edit'">
    <el-dialog  v-bind="dialogProps" @close="handleClose">
      <el-form  ref="queryRef" :inline="true"  label-width="68px" >
        <v-form-nested-item
            v-for="item in scheme.children"
            :item="item"
            :key="item.id"
            :form-data="formData"
        ></v-form-nested-item>
      </el-form>
    </el-dialog>
  </template>
  <template v-else-if="cMode === 'read'">
    <el-dialog  v-bind="dialogProps" @close="handleClose" >
      <el-form  ref="queryRef" :inline="true"  label-width="68px" >
        <v-form-nested-item
            v-for="item in scheme.children"
            :item="item"
            :key="item.id"
            :form-data="formData"
        ></v-form-nested-item>
      </el-form>
    </el-dialog>
  </template>
  <template v-else-if="cMode === 'hidden' ">
    <el-dialog  v-show="false" v-bind="dialogProps"  >
      <el-form  ref="queryRef" :inline="true"  label-width="68px" >
        <v-form-nested-item
            v-for="item in scheme.children"
            :item="item"
            :key="item.id"
            :form-data="formData"
        ></v-form-nested-item>
      </el-form>
    </el-dialog>
  </template>
</template>

<script lang="ts" setup>
import {computed, inject, ref, watch,reactive,onMounted, onUnmounted} from "vue";
import { showDialogKey,setValueKey } from "@/config/app.keys";
import {getCurrentInstance} from 'vue';
import SimulationDialog from '@/components/common/dialog/SimulationDialog.vue'
const {proxy} = getCurrentInstance();
import { formModeKey } from "@/components/form/state.key";
import VFormNestedItem from "@/components/form/designer/VFormNestedItem.vue";
import bus  from "@/event/bus";
import eventBus from '@/event/eventBus';
interface Props {
  //modelValue:object,
  mode?: FormFieldMode,
  id?:string,
  children:any[],
  title:string,
  width:string,
  vModel:boolean,//是否显示
  top:string,//dialog CSS 中的 margin-top 值，默认为 15vh
  fullscreen:boolean,//是否全屏
  showClose:boolean,//是否显示关闭按钮
  modal:boolean,//是否显示遮罩层
  lockScroll:boolean,//是否锁定滚动条
  closeOnClickModal:boolean,//是否可以通过点击 modal 关闭 Dialog
  closeOnPressEscape:boolean,//是否可以通过按下 ESC 关闭 Dialog
  openDelay:number,//延迟打开的时间，单位毫秒。
  closeDelay:number,//延迟关闭的时间，单位毫秒。
  draggable:boolean,//是否可拖拽
  overflow:boolean,//是否拖动范围可以超出可视区
  center:boolean,//是否让 Dialog 的 header 和 footer 部分居中排列
  alignCenter:boolean,
  formData?:object
}
const props = defineProps<Props>()
const formMode = inject(formModeKey)
const dialogProps=reactive({
  "model-value":false,
});

const cMode = computed<FormFieldMode>(() => {
  if (props.mode) {
    return props.mode
  }
  if (formMode?.value) {
    return formMode.value
  }
  return "edit"
})
const emit = defineEmits(['update:children','update:vModel'])
const formData =ref({})

const scheme = ref({children:[]})

watch(() => props, (newVal) =>{


  console.log('maintaindialog props:'+JSON.stringify(props))

  if(JSON.stringify(props.children)!=JSON.stringify(scheme.value.children)) {
    scheme.value.children = props.children;
  }
  formData.value = props.formData

  fillDialogProps()
  console.log('formData1.value:'+JSON.stringify(formData.value))
},{immediate: true,deep: true})

watch(()=> scheme,(newVal)=>{

  //let tempJson = {children:JSON.stringify(scheme.value.children)}
  console.log('emit change children:'+JSON.stringify(scheme.value.children))
  if(JSON.stringify(props.children)!=JSON.stringify(scheme.value.children)) {

    emit('update:children', scheme.value.children)
  }
},{immediate: true,deep: true})
function fillDialogProps() {
      // dialogProps.title= props.title;
      if(props.width) {
        dialogProps.width = props.width;
      }
      dialogProps["model-value"]= props.vModel;//是否显示
      dialogProps.top= props.top;//dialog CSS 中的 margin-top 值，默认为 15vh
      dialogProps.fullscreen= props.fullscreen;//是否全屏
      dialogProps.showClose= props.showClose;//是否显示关闭按钮
      dialogProps.modal= props.modal;//是否显示遮罩层
      dialogProps.lockScroll= props.lockScroll;//是否锁定滚动条
      dialogProps.closeOnClickModal= props.closeOnClickModal;//是否可以通过点击 modal 关闭 Dialog
      dialogProps.closeOnPressEscape= props.closeOnPressEscape;//是否可以通过按下 ESC 关闭 Dialog
      dialogProps.openDelay= props.openDelay;//延迟打开的时间，单位毫秒。
      dialogProps.closeDelay= props.closeDelay;//延迟关闭的时间，单位毫秒。
      dialogProps.draggable= props.draggable;//是否可拖拽
      dialogProps.overflow= props.overflow;//是否拖动范围可以超出可视区
      dialogProps.center= props.center;//是否让 Dialog 的 header 和 footer 部分居中排列
      dialogProps.alignCenter= props.alignCenter;//是否让 Dialog 的 body 部分居中排列
      dialogProps["append-to-body"]= true;//Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true
}
function updateDialogAttribute(children){

  if(JSON.stringify(scheme.value.children)!=JSON.stringify(children)) {
    scheme.value.children = children
    emit('update:children', children)
  }
}
onMounted(() => {

  eventBus.$on(props.id+"_"+showDialogKey, (data) => {
    if(data.title) {
      dialogProps.title = data.title;
    }
    if(dialogProps["model-value"] == data.show){
      // dialogProps["model-value"] = !data.show;
      return
    }
    console.log('updateDialogAttribute:'+JSON.stringify(data))

    dialogProps["model-value"]= data.show;//是否显示
    emit('update:vModel', data.show)


  })
})
onUnmounted(() => {
  eventBus.$off(props.id+"_"+showDialogKey)
})
function handleClose(){
  dialogProps["model-value"]= false
}
</script>

<style scoped>

</style>
